<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/header_com.css">
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/navigation_com.css">
    <link rel="stylesheet" href="./css/special.css">
    <link rel="stylesheet" href="./css/iconfont.css">
    <link rel="stylesheet" href="./css/footer_com.css">
	<link rel="stylesheet" href="./css/pagetion.css" />
</head>
<body>
    <!--1. the header start -->
    <header>
        <div class="header wrapper">
            <p>ベッドと美しい生活    美好宠物生活</p>
            <h1>pidan</h1>
            <input type="text" class="iconfont" placeholder="&#xe63c">
        </div>
    </header>
    <!--1. the header end -->


    <!--2. the slider start -->
    <div class="slider">
        <img src="./img/image5/banner.png" alt="">
    </div>
    <!--2. the slider end -->


    <!--3. the navigation start -->
    <div class="navigation wrapper">
        <ul>
            <li><a href="./index.html" >首页</a></li>
            <li><a href="./product.html" >产品中心</a></li>
            <li><a href="./brand.html" >品牌故事</a></li>
            <li><a href="./news.html">新闻中心</a></li>
            <li><a href="./special.html" class="on">special特别合作</a></li>
            <li><a href="./contract.html">联系方式</a></li>
        </ul>
    </div>
    <!--3. the navgation end -->

    <!--4. the image start  -->
    <ul class="product wrapper">
        <li>
            <img src="./img/image5/cat1.png" alt="">
            <div class="top">
                <p>pidan x蛋黄哥联名猫咪睡垫</p>
                <button>立即购买</button>
            </div>
        </li>
        <li>
            <img src="./img/image5/cat2.png" alt="">
            <div class="top">
                <p>pidan x蛋黄哥联名猫咪睡垫</p>
                <button>立即购买</button>
            </div>
        </li>
        <li>
            <img src="./img/image5/cat3.png" alt="">
            <div class="top">
                <p>pidan x蛋黄哥联名猫咪睡垫</p>
                <button>立即购买</button>
            </div>
        </li>
        <li>
            <img src="./img/image5/cat4.png" alt="">
            <div class="top">
                <p>pidan x蛋黄哥联名猫咪睡垫</p>
                <button>立即购买</button>
            </div>
        </li>
        <li>
            <img src="./img/image5/cat5.png" alt="">
            <div class="top">
                <p>pidan x蛋黄哥联名猫咪睡垫</p>
                <button>立即购买</button>
            </div>
        </li>
        <li>
            <img src="./img/image5/cat6.png" alt="">
            <div class="top">
                <p>pidan x蛋黄哥联名猫咪睡垫</p>
                <button>立即购买</button>
            </div>
        </li>
    </ul>
   <ol class="pagetion">
       <li class="on">1</li>
       <li>2</li>
   </ol>
    <!--4. the image end  -->

    <!-- the footer start -->
    <div class="footer wrapper">
        <p>沪ICP备12385496-3 sdhfnhrj©2020 Danke Co</p>
        <p>服务热线：+86 400-920-0674</p>
    </div>
    <!-- the footer end -->

</body>
</html>